<template>
<div >
	<div class="formbox">
		<el-form :inline="true" :model="searchFrom" id="searchForm" style="width: 660px">
			<el-form-item label="会议室位置">
				<my-cascader
								expand-trigger="hover"
								:options="Locations"
								v-model="searchFrom.location"
								change-on-select
								@showNext="LocationChange"
								placeholder="会议室位置"
								ref="cascader"
				></my-cascader>
			</el-form-item>
			<el-form-item label="容纳人数">
				<el-input-number v-model="searchFrom.Num" :controls="false" lable="容纳人数"></el-input-number>
			</el-form-item>
			<!--<el-form-item>-->
				<!--<el-button type="primary" @click='resetForm' >重置</el-button>-->
			<!--</el-form-item>-->
			<!--<el-form-item style="float: right">-->
				<!--<span style="color: #5ba9f3;cursor: pointer" @click="showgz">-->
					<!--<i class="iconfont icon-leftalignpx1" style="margin-right: 6px"></i>-->
				<!--会议室管理规则-->
				<!--</span>-->
			<!--</el-form-item>-->
		</el-form>
	</div>
	<div class="Legendbox">
		<ul style="width: 750px;" id="tuli">
			<li>
				<div class="Legend" style="border: 1px solid #ccc"></div>
				<div class="text">可预订</div>
			</li>
			<li>
				<div class="Legend" style="background: #5ba9f3"></div>
				<div class="text">已预订</div>
			</li>
			<li style="width: 500px">
				<div class="Legend" style="background: #f86f85"></div>
				<div class="text">我的预定</div>
				<a class="tip" >注：预定时间不能小于当前时间<span @click="showgz" style="margin-left: 30px;color:#5ba9f3;cursor: pointer">会议室管理规则</span></a>

			</li>
		</ul>
		<el-switch v-model="CrossDay" class="switch" active-text="多天预订" ></el-switch>
	</div>
	<div class="maincont">
		<div class="timeHader">
			<CalenderLine v-model="searchFrom.date" @changeTimetamp="changeTimetamp"></CalenderLine>
		</div>
	</div>
	<div class="meetingBox" :style="{'height':meetingBoxHeight+'px'}" v-loading="loading">
		<DailyAttempt :day="searchFrom.date" :room-list="roomList" v-if="!CrossDay" :timestamp="timestamp"  :notdata="notdata" ref="DailyAttempt"></DailyAttempt>
		<CrossDayView :day="searchFrom.date" :room-list="roomList" v-if="CrossDay" :notdata="notdata" ref="CrossDayView"></CrossDayView>
	</div>
	<el-dialog
					title="提示"
					:visible.sync="meetingLocatVisible"
					width="350px"
					:show-close="false"
					:close-on-click-modal="false"
					:close-on-press-escape="false"
					center>
		<div style="text-align: center">
			<span>首次使用该系统，请先选择您的办公区域</span>
			<div style="margin-top: 20px">
				<el-select v-model="firstlocation" placeholder="办公区域">
					<el-option
									v-for="item in Locations"
									:key="item.value"
									:label="item.label"
									:value="item.value">
					</el-option>
				</el-select>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="fistChooseLocal">确 定</el-button>
  </span>
	</el-dialog>
</div>
</template>
<script type="es6">
import CalenderLine from '../components/CalenderLine';
import {parseTime, lengthTimestramp} from '../../libs';
import eventBus from '../../libs/eventBus';
import DailyAttempt from '../components/MeetingTable/DailyAttempt';
import CrossDayView from '../components/MeetingTable/CrossDay';
import Reserve from '../mixin/Reserve';
import {MeetingTable} from '@/config';
import API from '@/API';
import myCascader from '../components/myCascader';
export default {
  mixins: [Reserve],
  data () {
    return {
      searchFrom: {
        location: [],
        Num: undefined,
        date: parseTime(new Date(), '{y}-{m}-{d}'),
        BeginTimeStamp: 0,
        EndTimeStamp: 0
      },
      timestamp: 0,
      CrossDay: false,
      meetingBoxHeight: 500,
      driver: null,
      loading: false,
      roomList: [],
      notdata: false,
      meetingLocatVisible: false,
      firstlocation: ''
    };
  },
  components: {
    CalenderLine,
    DailyAttempt,
    CrossDayView,
    myCascader
  },
  computed: {},
  methods: {
    showgz () {
      eventBus.$emit('showguizeMO');
    },
    resetForm () {
      this.searchFrom.location = [];
      this.searchFrom.Num = undefined;
    },
    search () {
      if (this.loading && this.timestamp) {
        return;
      }
      if (!this.CrossDay) {
        // 当天预定
	      if (!this.searchFrom.location.length) {
	        return;
	      }
        this.roomList = [];
        this.loading = true;
        this.$nextTick(() => {
          let param = {
            Capacity: this.searchFrom.Num,
            BeginTimeStamp: this.searchFrom.BeginTimeStamp,
            EndTimeStamp: this.searchFrom.EndTimeStamp
          };
          if (this.searchFrom.location.length > 0) {
            param.RegionID = this.searchFrom.location[0];
          }
          if (this.searchFrom.location.length > 1) {
            param.FloorID = this.searchFrom.location[1];
          }
          API.getreserverroomList(param).then((res) => {
            let json = res.data;
            this.loading = false;
            if (json.status === '200') {
              if (json.data) {
                this.roomList = json.data;
                if (!this.roomList.length) {
                  this.notdata = true;
                } else {
                  this.notdata = false;
                }
                this.$nextTick(() => {
                  this.$refs.DailyAttempt.autoWith();
                  this.$refs.DailyAttempt.initdestine();
                });
              }
            }
          }).catch(() => {
            this.loading = false;
          });
        });
      } else {
        // 跨天
        if (!this.searchFrom.location.length) {
          return;
        }
        this.roomList = [];
        this.loading = true;
        this.$nextTick(() => {
          let param = {
            Capacity: this.searchFrom.Num,
            BeginTimeStamp: this.searchFrom.BeginTimeStamp,
            EndTimeStamp: this.searchFrom.EndTimeStamp
          };
          if (this.searchFrom.location.length > 0) {
            param.RegionID = this.searchFrom.location[0];
          }
          if (this.searchFrom.location.length > 1) {
            param.FloorID = this.searchFrom.location[1];
          }
          API.getreserverroomDayList(param).then((res) => {
            let json = res.data;
            this.loading = false;
            if (json.status === '200') {
              if (json.data) {
                this.roomList = json.data;
                if (!this.roomList.length) {
                  this.notdata = true;
                } else {
                  this.notdata = false;
                }
                this.$nextTick(() => {
                  this.$refs.CrossDayView.autoWith();
                  this.$refs.CrossDayView.initdestine();
                });
              }
            }
          }).catch(() => {
            this.loading = false;
            this.roomList = [];
          });
        });
      }
    },
    changeTimetamp (time) {
      this.timestamp = time;
      this.dotimestamp();
    },
    dotimestamp () {
      // let date = new Date(this.searchFrom.date);
      // if (!this.CrossDay) {
      //   date.setHours(MeetingTable.Daily.times[0], 0, 0, 0);
      //   this.searchFrom.BeginTimeStamp = date.getTime();
      //   date.setHours(MeetingTable.Daily.times[MeetingTable.Daily.times.length - 1] + 1, 0, 0, 1);
      //   this.searchFrom.EndTimeStamp = date.getTime();
      // } else {
      //   date.setHours(MeetingTable.CrossDay.dayCell.begin, 0, 0, 0);
      //   this.searchFrom.BeginTimeStamp = date.getTime();
      //   date.setDate(date.getDate() + MeetingTable.CrossDay.taleLength - 1);
      //   date.setHours(MeetingTable.CrossDay.dayCell.end, 0, 0, 1);
      //   this.searchFrom.EndTimeStamp = date.getTime();
      // }
      if (!this.CrossDay) {
        this.searchFrom.BeginTimeStamp = lengthTimestramp(this.timestamp, 0, MeetingTable.Daily.times[0], 0);
        this.searchFrom.EndTimeStamp = lengthTimestramp(this.timestamp, 0, MeetingTable.Daily.times[MeetingTable.Daily.times.length - 1] + 1, 0);
      } else {
        this.searchFrom.BeginTimeStamp = lengthTimestramp(this.timestamp, 0, MeetingTable.CrossDay.dayCell.begin, 0);
        this.searchFrom.BeginTimeStamp = lengthTimestramp(this.timestamp, MeetingTable.CrossDay.taleLength - 1, MeetingTable.CrossDay.dayCell.end, 0);
      }
	  },
    fistChooseLocal () {
      if (this.firstlocation !== '') {
        this.searchFrom.location = [this.firstlocation];
        this.meetingLocatVisible = false;
      }
    }
  },
  mounted () {
    document.body.style.overflow = 'hidden';
    // this.timestamp();
    this.initLocations();
    let clientHeight = document.documentElement.clientHeight;
    this.meetingBoxHeight = clientHeight - 270;
    eventBus.$on('onresize', () => {
      let clientHeight = document.documentElement.clientHeight;
      this.meetingBoxHeight = clientHeight - 270;
    });
    // 给会议室位置添加默认值
    if (this.user.Behavior.FloorID !== '-1') {
      this.searchFrom.location = [this.user.Behavior.RegionID, this.user.Behavior.FloorID];
      this.LocationChange([this.searchFrom.location[0]]);
    } else if (this.user.Behavior.RegionID !== '-1') {
      this.searchFrom.location = [this.user.Behavior.RegionID];
      this.LocationChange(this.searchFrom.location);
    }
    // 第一次完成引导  显示选择会议室位置
    eventBus.$on('firstLoad-completeguide', () => {
      this.meetingLocatVisible = true;
    });
  },
  watch: {
    searchFrom: {
      handler (newval, olde) {
        // this.timestamp();
        this.search();
        let Behavior = this.user.Behavior;
        if (newval.location.length === 1 && (Behavior.RegionID !== newval.location[0] || Behavior.FloorID !== '-1')) {
          Behavior.RegionID = newval.location[0];
          Behavior.FloorID = '-1';
          // this.$refs.cascader.menuVisible = false;
          this.behaviormodify(Behavior);
          return;
        }
        if (newval.location.length === 2 && Behavior.FloorID !== newval.location[1]) {
          Behavior.RegionID = newval.location[0];
          Behavior.FloorID = newval.location[1];
          // this.$refs.cascader.menuVisible = false;
          this.behaviormodify(Behavior);
        }
      },
      deep: true
    },
    CrossDay () {
      // this.timestamp();
      this.search();
    }
  },
  destroyed () {
    document.body.style.overflow = '';
    eventBus.$off('onresize');
    eventBus.$off('firstLoad-completeguide');
  }
};
</script>
<style lang="less" scoped>
	.formbox{
		padding: 15px 20px 2px 20px;
		background: #fff;
		border-bottom: 1px solid #eeeeee;
	}
	.maincont{
		margin-top: 15px;
		background: #fff;
		.timeHader{
			padding: 10px 20px;
			border-bottom: 1px solid #eeeeee;
		}
	}
	.Legendbox{
		padding: 0px 20px;
		background: #ffffff;
		position: relative;
		li{
			display: inline-block;
			line-height: 40px;
			width: 120px;
			position: relative;
			.Legend{
				height: 15px;
				width: 15px;
				position: absolute;
				top: 12px;
			}
			.text{
				margin-left: 30px;
			}
			.tip{
				position: absolute;top: 0px;left: 100px;
				color: #908f8f;
			}
		}
		.switch{
			position: absolute;
			top: 11px;
			right: 41px;
		}
	}
	.meetingBox{
		padding: 10px 20px;
		background: #fff;
	}

</style>
